<template>
  <div class="promise">
    <div class="promise-inner">
      <div class="contact">
        <div class="tel">
          <img src='@/assets/imgs/bottom_zx.png' alt="">
        </div>
      </div>
      <div class="promise-content">
        <div 
          class="promise-item border-right hover-style" 
          v-for="item in list" 
          :key="item.id"
          >
          <span class="icon icon-bg"><i class="iconfont" :class="item.icon"></i></span>
          <p class="show-text">{{item.textS}}</p>
          <p class="long-text">{{item.textL}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    data() {
      return {
        // 底部承诺数据
        list: [
          {
            id: 1,
            // icon: 'icon',
            textS: '多样玩法',
            textL: '彩种齐全 玩法多样',
            icon: 'iconindex_duoyangwanfa'
          },
          {
            id: 2,
            // icon: 'icon',
            textS: '实时开奖',
            textL: '连线同步 即时开奖',
            icon: 'iconindex_shishikaijiang'
          },
          {
            id: 3,
            // icon: 'icon',
            textS: '急速体验',
            textL: '用户至上 体验为王',
            icon: 'iconindex_jisutiyan'
          },
          {
            id: 4,
            // icon: 'icon',
            textS: '金牌服务',
            textL: '金牌服务 安心购买',
            icon: 'iconindex_jinpaifuwu'
          },
          {
            id: 5,
            // icon: 'icon',
            textS: '信誉至上',
            textL: '宁损万金 不失半信',
            icon: 'iconshezhi_anquanwenti'
          }
        ]
      }
    }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables'
  .promise
    width 100%
    padding 19px 0
    background rgba(244,244,244,1)
    box-shadow 0px -6px 10px 0px rgba(0, 0, 0, 0.1)
    .promise-inner
      position relative
      width 1200px
      height 80px
      margin 0 auto
      .contact
        .tel
          width 232px
          img 
            width 100%
      .promise-content
        position absolute 
        top 0
        right 0
        display flex
        width 940px
        height 80px
        .promise-item
          display flex
          flex-direction column
          align-items center
          justify-content space-between
          width 20%
          border-color $color-divide-line
          .icon
            width 32px
            height 32px
            .iconfont
              font-size 34px
              color #cca566 
          .short-text
            font-size 14px
            font-weight 400
            color rgba(43,48,66,1)
          .long-text
            font-size 14px
            font-weight 400
            color rgba(140,143,152,1)
</style>